<template>
  <div class="artist-detail-container scroll-container">
    <div class="header">
      <img
        :src="singer.avatar"
        class="left" />
      <div class="right">
        <h4 class="name">{{ singer.name }}</h4>
        <div class="info">
          <p v-if="singer.alias?.length != 0">
            英文名：{{ singer.alias?.join('、') }}
          </p>
          <p class="job">职业：歌手、词曲创作者</p>
        </div>
        <span class="fans">粉丝数：{{ singer.score }}</span>
        <div>
          <DecoratedButton
            icon="&#xf0175;"
            name="关注"
            class="operate" />
          <DecoratedButton
            icon="&#xe693;"
            name="歌手电台"
            class="operate" />
        </div>
      </div>
    </div>
    <div class="content">
      <Tab
        active="hot"
        @getActive="getActive">
        <template #content>
          <el-tab-pane
            label="精选"
            name="hot">
            <SongList :songs="hotSongList" />
          </el-tab-pane>
          <el-tab-pane
            label="专辑"
            name="album">
            <Loading
              :isLoading="isLoading"
              v-if="isLoading" />
            <Albums :albums="artistAlbum" />
          </el-tab-pane>
          <el-tab-pane
            label="视频"
            name="mv">
            <Loading
              :isLoading="isLoading"
              v-if="isLoading" />
            <Mv :mvs="artistMv" />
          </el-tab-pane>
          <el-tab-pane
            label="详情"
            name="detail">
            <Loading
              :isLoading="isLoading"
              v-if="isLoading" />
            <div class="detail">
              <p class="desc">
                {{ singer.briefDesc }}
              </p>
              <template
                v-for="item in introduce"
                v-if="introduce.length > 0"
                :key="item.title">
                <h4>{{ item.title }}</h4>
                <p>{{ item.content }}</p>
              </template>
            </div>
          </el-tab-pane>
        </template>
      </Tab>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, inject, Ref } from 'vue';
import { useRoute } from 'vue-router';
import {
  getArtistInfo,
  getArtistMv,
  getArtistDesc,
  getArtistAlbum,
} from '../api/api';
import { Artist, Song, MV, ArtistDesc, Album, Svg } from '../model';
import {
  elMessage,
  getMusicUrls,
  getMusicInfos,
  getTheme,
  formatTime,
} from '../utils/util';
import { elMessageType } from '../model/enum';
import Mv from '../components/Mv.vue';
import DecoratedButton from '../components/DecoratedButton.vue';
import Albums from '../components/Albums.vue';
import Tab from '../components/Tab.vue';
import SongList from '../components/SongList.vue';
import Loading from '../components/Loading.vue';

//主题设置
const color = getTheme().get('fontColor');
const colorBlack = getTheme().get('fontBlack');
const boxShadow = getTheme().get('shadow');

//路由参数获取
const route = useRoute();
const id = route.query.id;
const score = route.query.score;
//滚动加载数据的动画
const isLoading = ref<boolean>(false);
//页面第一次加载的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;
//设置隐藏滚动条
const hideScroll = inject('hideScroll') as Function;

//歌手基本信息
const singer = reactive<Artist>({
  name: id + '',
  id: '',
  avatar: '',
  score: Math.floor(Number.parseInt(score as string) / 10000) + '万',
  alias: [],
});
//歌手基本简介
const introduce = reactive<ArtistDesc[]>([]);
//热门歌曲列表
const hotSongList = reactive<Song[]>([]);
//歌手mv
const artistMv = reactive<MV[]>([]);
//歌手专辑
const artistAlbum = reactive<Album[]>([]);
//获取当前活跃的选项，并根据选项加载数据
const getActive = (active: string) => {
  hideScroll();
  //点击加载数据
  if (active == 'mv' && artistMv.length == 0) {
    isLoading.value = true;
    getArtistMv(id + '')
      .then((response: any) => {
        const { mvs } = response;
        mvs.forEach((mv: any) => {
          const { id, name, artistName, imgurl16v9, playCount } = mv;
          artistMv.push({
            id,
            name,
            artist: artistName,
            image: imgurl16v9,
            playCount,
          });
        });
        isLoading.value = false;
      })
      .catch((err: any) => {
        elMessage(elMessageType.ERROR, err.message);
      });
  } else if (active == 'album' && artistAlbum.length == 0) {
    isLoading.value = true;
    getArtistAlbum(id + '')
      .then((response: any) => {
        const { hotAlbums } = response;
        hotAlbums.forEach((item: any) => {
          const { picUrl, name, publishTime } = item;
          artistAlbum.push({
            name,
            id: item.id,
            cover: picUrl,
            publishTime: formatTime(publishTime),
            artistId: id + '',
          });
        });
        isLoading.value = false;
      })
      .catch((err: any) => {
        elMessage(elMessageType.ERROR, err.message);
      });
  } else if (active == 'detail' && introduce.length == 0) {
    isLoading.value = true;
    getArtistDesc(id + '')
      .then((response: any) => {
        const { introduction } = response;
        introduction.forEach((item: any) => {
          introduce.push({
            title: item.ti,
            content: item.txt,
          });
        });
        isLoading.value = false;
      })
      .catch((err: any) => {
        elMessage(elMessageType.ERROR, err.message);
      });
  }
};

//获取初始数据
getArtistInfo(id + '')
  .then((response: any) => {
    const { artist, hotSongs } = response;
    const { name, alias, picUrl, briefDesc } = artist;
    singer.name = name;
    singer.alias = alias;
    singer.avatar = picUrl;
    singer.briefDesc = briefDesc;
    //获取歌手热门歌曲
    const ids: string[] = [];
    hotSongs.forEach((song: any) => {
      //获取歌曲基本信息
      getMusicInfos(ids, hotSongList, song);
    });
    //批量获取音乐链接
    getMusicUrls(ids.join(','), hotSongList);
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@font-color-light-black: v-bind(colorBlack);
@shadow: v-bind(boxShadow);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.artist-detail-container {
  .header {
    width: 80vw;
    display: flex;
    .left {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: @shadow;
    }
    .right {
      margin-left: 30px;
      h4 {
        font-size: 26px;
        font-weight: 550;
        color: @font-color;
        margin-top: 5px;
        letter-spacing: 1px;
      }
      .info {
        display: flex;
        p {
          font-size: 12px;
          margin: 20px 0;
          color: @font-color;
          letter-spacing: 0.5px;
          span {
            margin-right: 10px;
          }
          margin-right: 20px;
        }
      }
      .fans {
        display: inline-block;
        font-size: 12px;
        color: @font-color-gray;
        margin-bottom: 10px;
      }

      .operate {
        width: 110px;
        font-size: 13px;
        letter-spacing: 1px;
        color: #000;

        &:first-child {
          background-color: #1fce9b;
          color: #ffffff;
          &:deep(.iconfont) {
            font-size: 13px;
          }
        }
      }
    }
  }
  .loading {
    position: absolute;
    z-index: 100;
    top: 0;
  }
  .content {
    margin-top: 15px;
    .tab {
      &:deep(.el-tabs__item) {
        font-size: 14px;
        letter-spacing: 1px;
      }
      &:deep(.el-tab-pane) {
        position: relative;
      }

      // 专辑
      //mv
      .album-container {
        width: 80vw;
      }
      .mv {
        width: 80vw;
        &:deep(.mv-simi) {
          width: 80vw;
        }
        &:deep(.mv-recommend) {
          width: 232px;
        }
      }
      //个人详情
      .detail {
        padding-top: 10px;
        letter-spacing: 1px;
        width: 80vw;
        .desc {
          margin: 10px 0 20px 0;
        }
        p {
          font-size: 12px;
          color: @font-color-gray;
          letter-spacing: 0.5px;
          line-height: 1.5;
        }
        h4 {
          font-size: 14px;
          color: @font-color;
          font-weight: 500;
          margin: 15px 0;
        }
      }
    }
  }
}
</style>
